<script setup lang="ts">
import useUserStore from '@/store/user'
const userStore = useUserStore()

const phone = ref('')
const kefuRef = ref()
const list = ref<
    {
        id?: number
        name?: string
        guide: { guide_id?: number; title?: string }[]
    }[]
>([])

const kefuConfirm = () => {
    uni.makePhoneCall({
        phoneNumber: phone.value,
        success: (response) => {
            console.log('success', response)
        },
        fail: (err) => {
            console.log('fail', err)
        }
    })
}

const navto = (url: string, params = {}) => uni.$util.goToPage({ url, params })

onShow(() => {
    // getKeySetting('service_telephone').then(({ data: { value } }: any) => (phone.value = value.trim()))
    // listApi().then(({ data }: any) => (list.value = data || []))
})
</script>
<template>
    <ex-header title="用户指南" />
    <view class="guide-view">
        <view class="kefu-btn flex" @click="kefuRef.show = true">
            <image src="http://cdn-pos.lingji.vip/static/icon/customer.png" mode="widthFix" style="width: 40rpx" />
            <text style="margin-left: 14rpx">联系客服</text>
        </view>

        <view class="pages-view">
            <u-collapse accordion :border="true">
                <block v-for="(v, k) of list" :key="k">
                    <u-collapse-item :title="v.name">
                        <view
                            :key="ck"
                            v-for="(cv, ck) of v.guide"
                            :class="{ 'pages-view-content': true, 'text-ellipsis': true, border: ck < v.guide.length - 1 }"
                            @click.stop="navto('pages/setting/agreement', { type: 'guide', id: cv.guide_id })"
                        >
                            {{ cv.title }}
                        </view>
                    </u-collapse-item>
                </block>
            </u-collapse>
        </view>

        <ex-dialog ref="kefuRef" title="联系客服" show-cancel-button confirm-text="拨号" confirm-color="#43CF7C" @confirm="kefuConfirm">
            <view class="flex column">
                <image style="width: 84rpx" :src="`http://cdn-pos.lingji.vip/static/icon/phone-${userStore.useType}.png`" mode="widthFix" />
                <view style="margin-top: 36rpx; font-size: 60rpx; font-weight: 700; color: #383838; text-align: center">
                    {{ phone }}
                </view>
            </view>
        </ex-dialog>
    </view>
</template>

<style scoped lang="scss">
.guide-view {
    padding: 26rpx 28rpx;
    .kefu-btn {
        color: #fff;
        padding: 32rpx;
        margin-bottom: 26rpx;
        background: linear-gradient(90deg, #4778ff 0%, #4778ffb8 100%);
    }
    .pages-view {
        background-color: #fff;

        &-content {
            padding: 16rpx;
            color: #9a9bad;
            text-align: left;
            font-size: 28rpx;
            font-weight: 400;
            letter-spacing: 0;
            line-height: 48rpx;

            &.border {
                border-bottom: 1rpx solid #dbdbdb;
            }
        }

        :deep(.u-collapse) {
            .u-cell__body {
                padding: 24rpx 28rpx;
            }

            .u-collapse-item__content__text {
                padding: 0 28rpx;
                border-bottom: 4rpx solid #f5f5f5 !important;

                &.content-class {
                    border: none !important;
                }
            }
        }
    }
}
</style>
